<template>
  <div class="home">
    <!--  头部 -->
      <van-search
      v-model="value"
      shape="round"
      fixed
      background="#07c160"
      placeholder="请输入搜索关键词"
      @click="$router.push('/search')"
      
    />
    <!-- 导航栏 --> 
    <van-tabs v-model="active" border @click="switchTab">
      <van-tab
        v-for="item in cate"
        :key="item._id"
        :title="item.name"
      ></van-tab>
    </van-tabs>

    <div class="home-article-list" style="padding-bottom: 50px">
      <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
        <!--  容器 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getArtList"
          :immediate-check="false"
        >
          <!-- 初始化后  会立刻执行一次  getArtList    cate_id  '' -->
          <!-- loading   是否转圈 是否正在加载中  -->
          <li v-for="(item, index) in articleList" :key="item._id"
           @click="$router.push({path:'/article',query:{article_id:item._id,title:item.title}})">
            <p>{{ item.title }}</p>
            <div
              :class="{
                hide: item.poster_type == 1,
                rightImg: item.poster_type == 2,
                articleImgs: item.poster_type == 3,
              }"
            >
              <img v-for="img in item.imageSrc" :src="img" />
              <p style="color:rgb(167, 164, 164);margin:5px">{{ item.author }} 评论{{ item.time | get_time }}</p>
            </div>
          </li>
        </van-list>
      </van-pull-refresh>
    </div>

    <!-- 底部栏 -->
    <tabBar></tabBar>
  </div>
</template>

<script>
// @ is an alias to /src
import { Tab, Tabs, List, PullRefresh, Search, } from "vant";

import Tabbar from "@/components/tabBar";

import { getCateList, getArticleList } from "@/api/home";

export default {
  name: "HomeView",
  components: {
    [Search.name]:Search,
    [Tabbar.name]: Tabbar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
  },
  data() {
    return {
      active: 0,
      value:"",
      cate: [], //  存放分类数据
      active_cate_id: "", //   当前被选中的那一项的分类id
      articleList: [], //  文章列表
      loading: false,
      finished: false, //  是否 全部 加载完毕了
      skip: 0,
      limit: 20,
      isRefresh: false, //  是否正在刷新
    };
  },
  filters: {
    get_time(v) {
      console.log(v);
     return new Date(v).getFullYear() +
        "-" +
        (new Date(v).getMonth() + 1) +
        "-" +
        new Date(v).getDate();
    },
  },
  mounted() {
    this.getCate();
  },
  methods: {
    //   下拉刷新
    onRefresh() {
      this.skip = 0;
      this.finished = false;
      this.getArtList(true);
    },

    //  分类切换功能
    switchTab() {
      this.active_cate_id = this.cate[this.active]._id;

      this.articleList = [];
      this.skip = 0;
      this.finished = false;

      this.getArtList();
    },

    getCate() {
      getCateList().then((res) => {
        console.log(res);

        this.cate = res.data;

        //  对 cate进行了更改  vue视图更新

        //  待 拿到分类数据后 去取第一个栏目的id

        this.active_cate_id = this.cate[this.active]._id; //  获取到目前高亮的栏目的id

        ///
        this.getArtList();
      });
    },
    //  获取文章列表

    getArtList(flag) {
      let { active_cate_id, skip, limit } = this; //

      getArticleList({
        cate_id: active_cate_id,
        skip,
        limit,
      }).then((res) => {
        if (flag) {
          //  如果是刷新操作
          this.isRefresh = false; //  结束下拉刷新的转圈
          this.articleList = res.data; //  替换为新的
        } else {
          this.articleList.push(...res.data); //  新数据和老数据 拼接
        }

        let len = this.articleList.length; //  数量
        if (len >= res.count) {
          this.finished = true; //  数据加载完了  再滑也别触发事件了
        } else {
          this.skip = len; // skip  更新
          this.loading = false; //  我可以继续去加载
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
//  主色
::v-deep .van-nav-bar__title{
  max-width:75%
}
.home-header-searchbox {
  height: 32px;
  width: 270px;
  background: rgb(247 255 247 / 50%);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

// ::v-deep .van-tabs--line {
//   border-bottom: 1px solid #ccc;
// }
::v-deep .van-tabs__wrap--scrollable .van-tab:nth-last-of-type(1) {
  border-right: 0;
}
::v-deep .van-tabs__line {
  bottom: 5.2vw;
  background-color: @mColor;
}

.home-article-list {
  overflow: hidden;
  img {
    max-width: 100%;
  }
}
</style>
